<template>
  <div style="background: #2c3e50">
    <h1 style="color:Orange;background: #2c3e50">图片标注网站</h1>

      <el-menu
        :default-active="activeIndex2"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#545c64"
        text-color="#fff"
        title="个人任务"
        active-text-color="#ffd04b">
        <el-menu-item index="1">我发布的</el-menu-item>
        <el-menu-item index="2">我领取的</el-menu-item>
        <el-menu-item index="3">返回主页</el-menu-item>
      </el-menu>
    <div v-show="showMyEst">
    <el-table
        ref="myEstTable"
        :data="myEstablished"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
       <el-table-column
          type="selection"
          width="100">
        </el-table-column>
        <el-table-column label="任务编号" style="width: 10%">
          <template slot-scope="scope">
            <p>{{scope.row.ids}}</p>
          </template>
        </el-table-column>
        <el-table-column label="任务描述" style="width: 20%">
          <template slot-scope="scope">
            <p>{{scope.row.des}}</p>
          </template>
        </el-table-column>
        <el-table-column label="发布日期" style="width: 15%">
          <template slot-scope="scope">
            <p>{{scope.row.date}}</p>
          </template>
        </el-table-column>
        <el-table-column label="是否已领取" style="width: 10%">
          <template slot-scope="scope">
            <p>{{scope.row.hastaken}}</p>
          </template>
        </el-table-column>
        <el-table-column label="是否已完成" style="width: 10%">
          <template slot-scope="scope">
            <p>{{scope.row.finished}}</p>
          </template>
        </el-table-column>

    </el-table>
      <div style="background: white">
      <el-button style="margin-top:2%"  type="primary" @click="DownloadMarkingData">下载选中任务数据</el-button>
      <el-radio v-model="radio" label="1">PASCAL VOC</el-radio>
      <el-radio v-model="radio" label="2">COCO</el-radio>
      <el-button style="margin-top:2%"  type="danger" @click="DeleteAMission">删除选中任务</el-button>
      </div>
    </div>

    <div v-show="showMyToken">
    <el-table
        ref="myEstTable"
        :data="myToken"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column label="任务编号"  style="width: 10%">
          <template slot-scope="scope">
            <p>{{scope.row.ids}}</p>
          </template>
        </el-table-column>
        <el-table-column label="任务描述" style="width: 15%">
          <template slot-scope="scope">
            <p>{{scope.row.des}}</p>
          </template>
        </el-table-column>
        <el-table-column label="是否已完成" style="width: 10%">
          <template slot-scope="scope">
            <p>{{scope.row.finished}}</p>
          </template>
        </el-table-column>
    </el-table>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "MyMissions",
  data(){
    return{
      radio: "1",
      selections: [],
      myEstablished: [],
      myToken: [],
      activeIndex2: '1',
      showMyEst: false,
      showMyToken: false
    }
  },
  mounted() {
    this.showMyEst = true
    this.showMyToken = false
    this.myEstablished = []
    this.myToken = []
    this.GetMyEstMissions()
    this.GetMyTakeMissions()
  },
  methods: {
    handleSelect(key, keyPath){
      if (key === '1'){
        this.selections = []
        this.showMyToken = false
        this.showMyEst = true
      }
      else if (key === '2'){
        this.selections = []
        this.showMyEst = false
        this.showMyToken = true
      }
      else if (key === '3'){
        this.backtoHome()
      }
  },
    // 返回主页
    backtoHome()
    {
      this.$router.push({path: "/MainPage"})
    },
    // 公用的方法：选择变换时
    handleSelectionChange(val){
      this.selections = val
    },
    // 下载对应任务的标注数据
    DownloadMarkingData(){
      if (this.selections.length > 1){
        this.$alert("每次只能下载一个任务的数据文件")
        return
      }
      if (this.selections[0]['finished'] === "否"){
        this.$alert("不能下载尚未完成标注的任务")
        return
      }
      axios.post(
          "/mission/downloadResult/",
          {
            "way": this.radio,
            "ids": this.selections[0]['ids']
          }
          , {responseType: "blob"}
        ).then(
        (response)=>{
          console.log(response)
          const blob = new Blob([response.data], { type: 'application/zip' })
          const url = window.URL.createObjectURL(blob)
          const link = document.createElement('a') // 创建a标签
          link.href = url
          link.download = "download.zip" // 文件重命名，若无需重命名，将该行删去
          link.click()
          URL.revokeObjectURL(url)
        }
      )
    },
    // 请求显示自己领取了的任务
    GetMyTakeMissions(){
      axios.post("/GetTakenMissions/", {"token":window.sessionStorage.getItem("token")})
      .then((response)=>{
        this.myToken = []
        if (response.data.code === '101')
          {
            this.$alert("token过期，请重新登陆")
            this.$router.push({path:"/LoginPage"})
          }
        else {
            let ids = JSON.parse(JSON.stringify(response.data.ids))
            let dess = JSON.parse(JSON.stringify(response.data.des))
            let finished = JSON.parse(JSON.stringify(response.data.finished))
            for (const e in dess)
            {
              this.myToken.push({ids: ids[e], des:dess[e], finished: finished[e]===false?"否":"是"})
            }
          return
          }
      }
      )
    },
    // 请求删除一个自己领取的任务
    DeleteAMission(){
      if (this.selections.length == 0)
      {
        return
      }
      for (const i in this.selections)
      {
        if (i["hastaken"] === true)
        {
          this.$alert("该任务正在进行中或已被完成，无法删除!")
          return
        }
      }
      // 发送请求，删除任务
      axios.post("/deleteAmission/"
      ,{
        "token":window.sessionStorage.getItem("token"), "deletelist":this.selections
        }).then(
        (response)=>{
          if (response.data.code === "101")
          {
            window.sessionStorage.removeItem("token")
            this.$alert('token过期，请重新登录', '失败', {confirmButtonText: '确定'})
            this.$router.push({path:"/LoginPage"})
          }
          else{
            this.$message.success("删除成功！将刷新页面显示")
            this.GetMyEstMissions()
          }
        }
      )
    },
    // 请求显示自己发布了的任务
    GetMyEstMissions(){
      axios.post("/mission/GetEstablishedMissions/",
        {
          "token": window.sessionStorage.getItem("token")
        }).then(
        (response)=>{
          this.myEstablished = []
          if (response.data.code === '101')
          {
            this.$alert("token过期，请重新登陆")
            this.$router.push({path:"/LoginPage"})
          }
          else {
            let dates = JSON.parse(JSON.stringify(response.data.dates))
            let ids = JSON.parse(JSON.stringify(response.data.ids))
            let dess = JSON.parse(JSON.stringify(response.data.des))
            let hastaken = JSON.parse(JSON.stringify(response.data.hastaken))
            let finished = JSON.parse(JSON.stringify(response.data.finished))
            for (const e in dates)
            {
              this.myEstablished.push({date:dates[e], ids: ids[e], des:dess[e], hastaken: hastaken[e]===false?"否":"是", finished: finished[e]===false?"否":"是"})
            }
          }
        }
      )
    }
  }
}
</script>

<style scoped>

</style>
